<template>
  <div class="pie-chart">
    <div class="main-wrapper">
      <div class="content-container">
        <!-- 标题和控件区域 -->
        <div class="header-controls">
          <el-row :gutter="10" align="middle" style="margin-top: -20px">
            <el-col :span="10">
              <div class="chart-title">分阶薪酬占比</div>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="selectedDistrict"
                placeholder="请选择区县"
                style="width: 100%"
                @change="handleDistrictChange"
                clearable
              >
                <el-option
                  v-for="district in districtList"
                  :key="district"
                  :label="district"
                  :value="district"
                />
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-date-picker
                v-model="pieChartSelectedDate"
                type="month"
                value-format="YYYY-MM"
                format="YYYY-MM"
                placeholder="选择月份"
                :picker-options="pickerOptions"
                style="width: 100%"
                @change="handleDateChange"
                :disabled-date="disabledDate"
              />
            </el-col>
          </el-row>
        </div>

        <!-- 第二层：图表和图例区域 -->
        <div v-if="hasData" class="chart-legend-layer" style="margin-top: 35px">
          <!-- 图表容器 -->
          <div class="chart-container">
            <div :key="chartKey" ref="chart" class="chart" />
          </div>

          <!-- 图例区域 -->
          <div class="legend-container">
            <div
              v-for="item in sortedLegendData"
              :key="item.name"
              class="legend-item"
              @click="handleLegendClick(item)"
            >
              <div
                class="legend-color"
                :style="{ backgroundColor: getColorForLegend(item.name) }"
              />
              <div class="legend-text">{{ item.name }} ({{ item.value }})</div>
            </div>
          </div>
        </div>
        <div v-else class="no-data-placeholder">
          <div class="no-data-text">暂无数据</div>
        </div>
        <!-- 薪资明细弹窗 -->
        <!-- 薪资明细弹窗（新版） -->
        <el-dialog
          :title="''"
          v-model="salaryDetailDialogVisible"
          width="85%"
          :before-close="handleCloseSalaryDetail"
          class="salary-detail-dialog"
          top="5vh"
        >
          <template #header>
            <div class="dialog-custom-header">
              <div class="header-content">
                <i class="el-icon-user-solid header-icon"></i>
                <span class="header-title">{{ salaryDetailTitle }}</span>
                <div class="header-subtitle">薪资明细详情</div>
              </div>
            </div>
            <el-button
              v-if="showExportButton"
              v-hasPermi="['dwxc:salary:exportSalaryDetail']"
              type="warning"
              plain
              icon="Download"
              style="position: absolute; right: 60px; top: 60px; z-index: 10"
              @click="handleExport"
              >导出</el-button
            >
          </template>

          <div class="dialog-content">
            <el-table
              :data="salaryDetailData"
              border
              stripe
              style="width: 100%"
              :header-cell-style="{
                background: '#f0f9eb',
                color: '#23A9F2',
                fontWeight: 'bold',
                textAlign: 'center',
                fontSize: '14px',
              }"
              :cell-style="{
                textAlign: 'center',
                padding: '8px 0',
              }"
              max-height="450"
              size="small"
            >
              <el-table-column label="基础信息" align="center">
                <el-table-column label="姓名" prop="realName" width="90" />
                <el-table-column label="区县" prop="district" width="90" />
                <el-table-column label="网格名称" prop="gridName" width="120" />
              </el-table-column>

              <el-table-column label="存量维护" align="center">
                <el-table-column label="家宽" prop="homeAmount" width="90">
                  <template #default="scope">
                    <span v-if="scope.row.homeAmount !== null">{{
                      scope.row.homeAmount.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
                <el-table-column label="企宽" prop="bizAmount" width="90">
                  <template #default="scope">
                    <span v-if="scope.row.bizAmount !== null">{{
                      scope.row.bizAmount.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="总计"
                  prop="totalMaintenance"
                  width="90"
                >
                  <template #default="scope">
                    <span v-if="scope.row.totalMaintenance !== null">{{
                      scope.row.totalMaintenance.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="新装按次" align="center">
                <el-table-column label="家客" prop="homeSubtotal" width="90">
                  <template #default="scope">
                    <span v-if="scope.row.homeSubtotal !== null">{{
                      scope.row.homeSubtotal.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
                <el-table-column label="企客" prop="bizSubtotal" width="90">
                  <template #default="scope">
                    <span v-if="scope.row.bizSubtotal !== null">{{
                      scope.row.bizSubtotal.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column label="奖励与补贴" align="center">
                <el-table-column
                  label="服务奖罚"
                  prop="serviceSubtotal"
                  width="90"
                >
                  <template #default="scope">
                    <span v-if="scope.row.serviceSubtotal !== null">{{
                      scope.row.serviceSubtotal.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
                <el-table-column label="金银铜" prop="medalLevel" width="80" />
                <el-table-column
                  label="激励包分配"
                  prop="incentivePackage"
                  width="90"
                >
                  <template #default="scope">
                    <span v-if="scope.row.incentivePackage !== null">{{
                      scope.row.incentivePackage.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
                <el-table-column label="补差" prop="subsidy" width="80">
                  <template #default="scope">
                    <span v-if="scope.row.subsidy !== null">{{
                      scope.row.subsidy.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column label="工资与收入" align="center">
                <el-table-column
                  label="上门整治"
                  prop="rectifySubtotal"
                  width="90"
                >
                  <template #default="scope">
                    <span v-if="scope.row.rectifySubtotal !== null">{{
                      scope.row.rectifySubtotal.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
                <el-table-column label="随销收入" prop="salesIncome" width="90">
                  <template #default="scope">
                    <span v-if="scope.row.salesIncome !== null">{{
                      scope.row.salesIncome.toFixed(2)
                    }}</span>
                    <span v-else>0.00</span>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column
                label="总计"
                prop="totalWithSales"
                width="90"
                fixed="right"
              >
                <template #default="scope">
                  <span style="font-weight: bold; color: #e65100">{{
                    scope.row.totalWithSales.toFixed(2)
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <template #footer>
            <div class="dialog-footer">
              <el-button
                type="primary"
                @click="salaryDetailDialogVisible = false"
                round
                style="padding: 10px 30px"
              >
                <i class="el-icon-close"></i> 关闭
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getSalarybyDistrict } from "@/api/dwxc/salary";
import { download } from "@/utils/request";
import {
  ElDatePicker,
  ElSelect,
  ElOption,
  ElRow,
  ElCol,
  ElButton,
  ElTable,
  ElTableColumn,
  ElDialog,
} from "element-plus";
import { salaryDetail, exportSalaryDetail } from "@/api/dwxc/salary.js";

export default {
  components: {
    ElDatePicker,
    ElSelect,
    ElOption,
    ElRow,
    ElCol,
    // 弹窗组件
    ElDialog,
    ElButton,
    ElTable,
    ElTableColumn,
  },
  props: {
    selectedDate: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      chartKey: 0, // 用于强制重新渲染图表
      // 区县列表
      districtList: [
        "全市",
        "浔阳区",
        "濂溪区",
        "柴桑区",
        "瑞昌市",
        "共青城",
        "庐山市",
        "武宁县",
        "修水县",
        "永修县",
        "德安县",
        "都昌县",
        "湖口县",
        "彭泽县",
      ],

      showExportButton: true,
      selectedDistrict: "全市", // 默认选中"全市"
      chartInstance: null,
      salaryChartData: [], // 环形图数据
      totalMaintainers: 0, // 总人数
      pieChartSelectedDate: this.selectedDate, // 使用父组件传入的日期
      chartColors: [
        "#66B2FF",
        "#5CD6D6",
        "#99FF99",
        "#FFD700",
        "#FFA07A",
        "#FF6347",
        "#BA55D3",
        "#8A2BE2",
        "#40E0D0",
        "#FF69B4",
        "#20B2AA",
        "#FF8C00",
        "#8B008B",
        "#32CD32",
      ],
      // 日期选择器配置，禁止选择当前月之后的日期
      pickerOptions: {
        disabledDate: (time) => {
          const now = new Date();
          const firstDayOfMonth = new Date(
            now.getFullYear(),
            now.getMonth(),
            1
          );
          return time.getTime() >= firstDayOfMonth.getTime();
        },
      },
      // 薪资明细弹窗相关
      salaryDetailDialogVisible: false,
      salaryDetailData: [],
      salaryDetailTitle: "",
    };
  },
  computed: {
    sortedLegendData() {
      // 按值从大到小排序图例数据
      // return [...this.salaryChartData]
      //   .filter((item) => item.value > 0)
      //   .sort((a, b) => b.value - a.value);
      // 按薪酬区间数值大小排序，而不是按人数排序
      return [...this.salaryChartData]
        .filter((item) => item.value > 0)
        .sort((a, b) => {
          // 提取区间起始值进行排序
          const getRangeStart = (name) => {
            // 处理"0-1000"或"1000以下"的情况
            if (name === "0-1000" || name === "1000以下") return 0;

            // 处理"X-Y"格式的区间
            const rangeMatch = name.match(/^(\d+)-(\d+)$/);
            if (rangeMatch) {
              return parseInt(rangeMatch[1]);
            }

            // 处理"X以上"格式的区间（如"10000以上"）
            const aboveMatch = name.match(/^(\d+)以上$/);
            if (aboveMatch) {
              return parseInt(aboveMatch[1]);
            }

            // 默认返回0
            return 0;
          };

          return getRangeStart(a.name) - getRangeStart(b.name);
        });
    },
    hasData() {
      // 判断是否有有效数据
      return (
        this.salaryChartData &&
        this.salaryChartData.some((item) => item.value > 0)
      );
    },
  },
  watch: {
    selectedDate: {
      handler(newVal) {
        // console.log("【pieChart watch】selectedDate changed:", newVal);
        // console.log("【pieChart watch】selectedDate type:", typeof newVal);
        this.pieChartSelectedDate = newVal;
        this.loadChartData(this.selectedDistrict);
      },
      immediate: true, // 设置为true，确保初始化时也能触发
    },
    // 添加对 hasData 的监听
    hasData: {
      handler(newVal, oldVal) {
        // 当从无数据变为有数据时，确保图表重新初始化
        if (newVal && !oldVal) {
          this.$nextTick(() => {
            // 增加 chartKey 强制重新渲染图表DOM
            this.chartKey++;
            this.$nextTick(() => {
              // 等待DOM更新后重新初始化图表
              this.initChart();
              this.updateChart(this.selectedDistrict);
            });
          });
        }
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.loadChartData(this.selectedDistrict);
    });
  },
  methods: {
    disabledDate(time) {
      // Disable current month and future months
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth(); // 0-11

      const selectedDate = new Date(time);
      const selectedYear = selectedDate.getFullYear();
      const selectedMonth = selectedDate.getMonth(); // 0-11 // Disable if selected date is current or future month

      return (
        selectedYear > currentYear ||
        (selectedYear === currentYear && selectedMonth >= currentMonth)
      );
    },
    initChart() {
      // 销毁已存在的图表实例
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }

      // 初始化新的图表实例
      if (this.$refs.chart) {
        this.chartInstance = echarts.init(this.$refs.chart);
        window.addEventListener("resize", this.handleResize);

        // 添加图表点击事件监听
        this.chartInstance.on("click", this.handleChartClick);
      }
    },

    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },

    beforeDestroy() {
      window.removeEventListener("resize", this.handleResize);
    },

    /**
     * 处理区县下拉框变化
     */
    handleDistrictChange(district) {
      this.loadChartData(district);
    },

    /**
     * 处理日期变化
     */
    handleDateChange(date) {
      // 通知父组件日期已更改
      this.$emit("handle-date-change", date);
      this.loadChartData(this.selectedDistrict);
    },

    /**
     * 根据区县名称和时间请求接口获取薪酬百分比数据并更新图表
     * @param {string} district 区县名称，'全市'表示不筛选区县
     */
    loadChartData(district) {
      // 格式化日期为接口需要的格式 (YYYY-MM)
      let formattedDate = "";
      if (this.pieChartSelectedDate) {
        if (typeof this.pieChartSelectedDate === "string") {
          // 如果是字符串格式 YYYY-MM-DD，提取 YYYY-MM
          formattedDate = this.pieChartSelectedDate.substring(0, 7);
        } else if (this.pieChartSelectedDate instanceof Date) {
          // 如果是 Date 对象，格式化为 YYYY-MM
          const year = this.pieChartSelectedDate.getFullYear();
          const month = (this.pieChartSelectedDate.getMonth() + 1)
            .toString()
            .padStart(2, "0");
          formattedDate = `${year}-${month}`;
        }
      } else {
        // 默认使用当前月份的上一个月
        const now = new Date();
        const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        formattedDate =
          lastMonth.getFullYear() +
          "-" +
          String(lastMonth.getMonth() + 1).padStart(2, "0");
      }

      // console.log("【格式化后的日期】formattedDate:", formattedDate);

      const params = {
        district: district === "全市" ? "全市" : district,
        time: formattedDate, // 接口要求时间格式：2025-05
      };

      // console.log("【发送API请求】params:", params);
      getSalarybyDistrict(params)
        .then((res) => {
          // console.log("【API响应】res:", res);

          // 处理不同的响应数据结构
          const responseData = res.data || res;
          // console.log("【标准化后的响应数据】responseData:", responseData);

          if (!responseData || !responseData.salaryPercentage) {
            console.warn("【接口返回空数据】salaryPercentage 不存在");
            this.salaryChartData = [];
            this.totalMaintainers = 0;
            this.updateChart(district);
            return;
          }
          // 使用标准化后的数据
          const salaryPercentage = responseData.salaryPercentage || {};
          this.totalMaintainers = responseData.totalMaintainers || 0;

          // console.log("【提取的数据】salaryPercentage:", salaryPercentage);
          // console.log("【提取的数据】totalMaintainers:", this.totalMaintainers);

          // 转换接口数据为 echarts 需要的格式
          const seriesData = Object.entries(salaryPercentage).map(
            ([key, val]) => {
              // 修改标签显示：将"1000以下"改为"0-1000"
              let displayName = key;
              if (key === "1000以下") {
                displayName = "0-1000";
              }

              return {
                name: displayName,
                value: Number(val.count),
              };
            }
          );

          // console.log("【转换后的图表数据】seriesData:", seriesData);

          this.salaryChartData = seriesData;
          // console.log("【更新图表】district:", district, "data:", this.salaryChartData);
          this.updateChart(district);
        })
        .catch((err) => {
          // console.error("【接口调用失败】err:", err);
          // console.error("【请求配置】config:", err.config);
          // console.error("【响应数据】response:", err.response);
          // console.error("【错误信息】message:", err.message);

          this.salaryChartData = [];
          this.totalMaintainers = 0;
          this.updateChart(district);
        });
    },

    /**
     * 获取图例项对应的颜色
     */
    getColorForLegend(name) {
      const index = this.sortedLegendData.findIndex(
        (item) => item.name === name
      );
      return this.chartColors[index % this.chartColors.length];
    },

    /**
     * 更新环形图显示
     * @param {string} district 当前选中区县
     */
    updateChart(district) {
      // const seriesData =
      //   this.salaryChartData.length > 0
      //     ? this.salaryChartData
      //     : [{ name: "无数据", value: 1 }];
      // 先过滤出有效数据（value > 0）
      const validData = this.salaryChartData.filter((item) => item.value > 0);

      // 构造图表数据，如果有有效数据则使用，否则显示"无数据"
      const seriesData =
        validData.length > 0 ? validData : [{ name: "无数据", value: 1 }];

      const option = {
        backgroundColor: "#ffffff",
        color: this.chartColors,
        title: {
          text: `${district} 平均薪酬占比`,
          left: "center",
          show: false, // 隐藏内部标题，使用外部标题
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
          position: 'center' // 添加这一行，使提示框显示在圆心位置
        },
        legend: {
          show: false, // 隐藏默认图例，使用自定义图例
        },
        series: [
          {
            name: "薪酬区间",
            type: "pie",
            radius: ["100%", "40%"], // 增大环形图尺寸
            center: ["50%", "50%"],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: "outside",
              formatter: "{b}: {d}%",
              fontSize: 12,
              color: "#666",
              distanceToLabelLine: 5,
            },
            labelLine: {
              show: false,
              length: 40,
              length2: 20,
              smooth: 0.2,
              lineStyle: {
                width: 1,
                color: "#999",
              },
            },
            // data: seriesData
            //   .filter((item) => item.value > 0)
            //   .sort((a, b) => b.value - a.value),

            // 直接使用处理好的数据，不再额外过滤
            data: seriesData,
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            minAngle: 5,
            stillShowZeroSum: false,
          },
        ],
      };

      // 添加检查确保图表实例存在
      if (!this.chartInstance && this.$refs.chart) {
        this.initChart();
      }

      if (this.chartInstance) {
        this.chartInstance.setOption(option, true);
        this.chartInstance.resize();
      }
    },
    /**
     * 处理图表点击事件
     */
    handleChartClick(params) {
      this.showSalaryDetails(params.name);
    },

    /**
     * 处理图例点击事件
     */
    handleLegendClick(item) {
      this.showSalaryDetails(item.name);
    },

    /**
     * 显示薪资明细
     */
    async showSalaryDetails(salaryRange) {
      try {
        // 设置弹窗标题
        this.salaryDetailTitle = `${salaryRange} 区间薪资明细`;
        console.log(salaryRange);

        // 显示加载状态
        this.salaryDetailData = [];
        this.salaryDetailDialogVisible = true;

        // 转换显示名称回原始名称用于查询
        let querySalaryRange = salaryRange;
        if (salaryRange === "0-1000") {
          querySalaryRange = "1000以下";
        }

        // 构造查询参数
        const queryParams = {
          pageNum: 1,
          pageSize: 9999, // 获取所有数据
          district:
            this.selectedDistrict === "全市" ? null : this.selectedDistrict,
          ofTime: this.pieChartSelectedDate,
          fullSalaryRange: querySalaryRange,
        };

        console.log("查询参数:", queryParams); // 添加调试日志
        const response = await salaryDetail(queryParams);
        console.log("接口响应:", response); // 添加调试日志

        // 处理返回的数据
        if (response.rows) {
          this.salaryDetailData = response.rows;
        } else {
          this.salaryDetailData = [];
        }
      } catch (error) {
        console.error("获取薪资明细失败:", error);
        this.$message.error("获取薪资明细失败");
        this.salaryDetailData = [];
      }
    },
    // 导出表格
    async handleExport() {
      try {
        // 转换显示名称回原始名称用于查询
        let querySalaryRange = this.salaryDetailTitle.replace(
          " 区间薪资明细",
          ""
        );
        if (querySalaryRange === "0-1000") {
          querySalaryRange = "1000以下";
        }

        // 构造查询参数
        const exportParams = {
          district:
            this.selectedDistrict === "全市" ? null : this.selectedDistrict,
          ofTime: this.pieChartSelectedDate,
          fullSalaryRange: querySalaryRange,
        };

        // 使用若依的通用下载方法（默认使用POST方法）
        await download(
          "/maintainerSalary/exportSalaryDetail",
          exportParams,
          `薪资明细_${this.selectedDistrict}_${this.pieChartSelectedDate}_${querySalaryRange}.xlsx`
        );
      } catch (error) {
        console.error("导出失败:", error);
        this.$message.error("导出失败");
      }
    },
    /**
     * 关闭薪资明细弹窗
     */
    handleCloseSalaryDetail() {
      this.salaryDetailDialogVisible = false;
      this.salaryDetailData = [];
      this.salaryDetailTitle = "";
    },
  },
};
</script>

<style scoped>
.no-data-text {
  font-size: 16px;
  color: #909399;
}
/* 添加无数据时的样式 */
.no-data-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
.pie-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-wrapper {
  width: 100%;
  height: 98%;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  flex: 1;
}

/* 标题和控件区域 */
.header-controls {
  padding: 0 0 15px 0;
  margin-bottom: 10px;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
  color: #333;
}

/* 第二层：图表和图例区域 */
.chart-legend-layer {
  display: flex;
  flex: 0 0 300px; /* 固定高度为300px，避免占用过多空间 */
  gap: 30px;
  margin-bottom: 15px;
}

.chart-container {
  flex: 2;
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
}

.legend-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  max-width: 300px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-text {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 第三层：总人数显示 */
.total-count-layer {
  flex-shrink: 0;
}

.total-count {
  text-align: center;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #f5f7fa;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* 弹窗美化样式 */
.salary-detail-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px 8px 0 0;
  padding: 0;
  border-bottom: none;
}

.dialog-custom-header {
  padding: 15px 20px;
  position: relative;
  text-align: center; /* 添加居中对齐 */
}

.header-content {
  display: inline-block; /* 使内容居中 */
  text-align: center;
  color: #333;
}

.header-icon {
  font-size: 24px;
  margin-right: 10px;
  vertical-align: middle;
  color: #ffd700;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  vertical-align: middle;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #333;
}

.header-subtitle {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 5px;
  letter-spacing: 1px;
  color: #666;
}

.salary-detail-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.salary-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 24px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.salary-detail-dialog :deep(.el-dialog__headerbtn) {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 10;
}

.salary-detail-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.salary-detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
  background-color: #f8f9fa;
}

.salary-detail-dialog :deep(.el-dialog__footer) {
  padding: 15px 20px;
  background-color: #f1f3f4;
  border-radius: 0 0 8px 8px;
}

.dialog-content {
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 10px;
}

.dialog-footer {
  text-align: center;
}

/* 表格美化 */
.salary-detail-dialog :deep(.el-table) {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.salary-detail-dialog :deep(.el-table th) {
  background-color: #f0f9eb !important;
}

.salary-detail-dialog :deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

.salary-detail-dialog :deep(.el-table .el-table__cell) {
  border-right: none;
}

.salary-detail-dialog :deep(.el-table .el-table__cell:last-child) {
  border-right: 1px solid #ebeef5;
}

/* 滚动条美化 */
.salary-detail-dialog :deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

.salary-detail-dialog :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.salary-detail-dialog :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background-color: #f5f7fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .controls-container {
    flex-direction: column;
    gap: 15px;
  }

  .chart-legend-layer {
    flex-direction: column;
    flex: 0 0 auto; /* 在小屏幕上自适应高度 */
    height: auto;
  }

  .legend-container {
    max-width: 100%;
    margin-top: 20px;
  }

  .district-select {
    width: 250px;
  }

  /* 图例项可点击样式 */
  .legend-item {
    cursor: pointer;
    transition: all 0.3s;
  }

  .legend-item:hover {
    transform: translateX(5px);
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 5px;
  }
}
</style>
